<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听子组件事件</title>
    <script src="../../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
    <div :style="{fontSize:fSize+'em'}">
        <blog-text v-for="(post,index) in posts" :key="post.id" :post="post" @large-text="geiWoJia"></blog-text>
        <custom-input v-model="input" :text="input"></custom-input>
        <custom-alert>Error</custom-alert>
    </div>
    <component is="custom-input"></component>
</div>
<script>
    window.onload = () => {
        Vue.component('blog-text', {
            props: ['post', 'text'],
            template: `
              <div>
              <h3>{{ post.title }}</h3>
              <button @click="$emit('large-text',2)">
                点击放大
              </button>
              </div>
            `
        });
        Vue.component('custom-input', {
            props: ['text'],
            template: `
              <input :value="text" @input="$emit('input',$event.target.value)">
            `
        })
        Vue.component('custom-alert', {
            template: `
            <div :style="{color:'red'}">
                <slot></slot>
            </div>
            `
        });
        let vm = new Vue({
            el: '#root',
            data() {
                return {
                    fSize: 1,
                    posts: [
                        {"id": 1, "title": "wow", "content": "unbelievable"},
                        {"id": 2, "title": "wow2", "content": "unbelievable2"}
                    ],
                    input: '',
                }
            },
            methods: {
                geiWoJia(args) {
                    return this.fSize += args;
                }
            }
        })
    }
</script>
</body>
</html>